<template>
	<div class="sellerRegist">
		<seller-tap>
			<span slot='font'>个人设置</span>
			<a href="#/seller" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
		<main>

			<form @submit="change">
				<div class="img">
					<!--<img :src="seller.avatar"/>-->
					<img-upload></img-upload>
				</div>

				<div><span>昵称</span><input autocomplete="off" @input="input1" @focus="focus" autofocus="autofocus" v-model.trim="nickName" type="text" name="nickName" :placeholder='seller.nickName' /><label><i  v-if="fei1" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="nickName" @click="clear" class="fa fa-times-circle"></i></label></div>

				<div><span>描述</span><input autocomplete="off" @input="input2" @focus="focus" v-model.trim="describe" type="text" name="describe" :placeholder='seller.describe' /><label><i  v-if="fei2" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="describe" @click="clear" class="fa fa-times-circle"></i></label></div>

				<div><span>手机</span><input @input="input3" type="text" autocomplete="off" :placeholder='seller.phone' v-model.trim="phone" @focus="focus" name="phone" /><label><i v-if="fei3" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="phone" @click="clear" class="fa fa-times-circle"></i></label></div>
				<div><span>邮箱</span><input @input="input4" type="text" autocomplete="off" :placeholder='seller.email' v-model.trim="email" @focus="focus" name="email" /><label><i v-if="fei4" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="email" @click="clear" class="fa fa-times-circle"></i></label></div>
				<p class="success" style="display: none; padding: 5px 10px; color: orangered;text-align: center;position: absolute;width: 100%;">{{success}}</p>
				<button :class="{dis:isOk}">提交修改</button>
			</form>

		</main>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import ImgUpload from '../components/ImgUpload'
	import { mapState, mapGetters } from 'vuex'
	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {
				nickName: '',
				describe: '',
				phone: '',
				email: '',
				isOk: false,
				fei1: true,
				fei2: true,
				fei3: true,
				fei4: true,
				isView: false,
				success: ''

			}
		},
		components: {
			SellerTap,
			ImgUpload
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'data3'
			]),
		},
		methods: {

			change: function(ev) {
				ev.preventDefault();

				if($('button').attr('class') == 'dis') {
					this.success = '请填写信息';
					$('.success').fadeIn();

					setTimeout(function() {
						$('.success').fadeOut(function() {

						});
					}, 200);

					return;
				}
				var data = new FormData($('form')[0]);
				//				data.lis= 0;
				var that = this;

				$.post({
					url: '/seller/changeInfo',
					data,
					contentType: false,
					processData: false,
					success: function(resData) {

						console.log(resData);

						if(resData.msg == 'success') {
							that.success = '修改成功';
							that.$store.commit('updateSeller', resData.seller);
							$('.success').fadeIn();
							setTimeout(function() {
								$('.success').fadeOut(function() {
									location.href = '#/seller';
								});
							}, 1000);
						} else {
							console.log(resData);
						}

					}
				})

			},

			view: function(ev) {
				this.isView = !this.isView;
				$(ev.target).parent().siblings('input').attr('type', 'text');
			},
			disview: function(ev) {
				this.isView = !this.isView;
				$(ev.target).parent().siblings('input').attr('type', 'password');
			},

			clear: function(ev) {
				var name = $(ev.target).parent().siblings('input').attr('name');
				this[name] = '';
				$('form button').attr('type', 'button')
				this.isOk = true;
			},

			focus: function(ev) {

				$(ev.currentTarget).siblings('label').children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				$(ev.currentTarget).parent().siblings().find('i').each(function() {
					$(this).css('display', 'none')
				})
			},
			pattern(val, patts, theData, ins) {
				$('label').eq(ins).children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				if(!patts.test(val) || val == '') {
					this[theData] = true;
				} else {
					this[theData] = false;
				}

//				if(this.fei1 || this.fei2 || this.fei3 || this.isfei4) {
//					$('form button').attr('type', 'button')
//					this.isOk = true;
//				} else {
//					this.isOk = false;
//					$('form button').attr('type', 'submit')
//				}

			},
			input1(ev) {

				var pat = /^[a-zA-Z0-9\-\.\+\*_ \u4e00-\u9fa5]{3,9}$/;
				this.pattern(this.nickName, pat, 'fei1', 0);
			},
			input2() {

				var pat = /^\S{1,}$/;
				this.pattern(this.describe, pat, 'fei2', 1)

			},
			input3() {

				var pat = /^\d{11}$/;
				this.pattern(this.phone, pat, 'fei3', 2);

			},
			input4() {

				var pat = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
				this.pattern(this.email, pat, 'fei4', 3);

			},
		}
	}
</script>

<style scoped>
	main {
		padding: 10px;
		padding-top: 50px;
	}
	
	main .img {
		text-align: center;
	}
	
	main .img img {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-bottom: 0;
	}
	
	main form div {
		border-bottom: solid 1px #ddd;
		padding: 7px 0;
		line-height: 30px;
	}
	
	main form div:first-child {
		border-bottom: none;
	}
	
	main form div span {
		margin-right: 10%;
	}
	
	main form div input {
		width: 55%;
		line-height: 30px;
		border: none;
		margin-right: 10px;
		background: none;
	}
	
	main button {
		border: none;
		background: red;
		color: white;
		margin-top: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 17px;
		cursor: pointer;
	}
	
	.fa-times-circle {
		color: #aaa;
	}
	
	.fa-eye-slash {
		color: #ccc;
	}
	
	form div i:first-child {
		display: none;
	}
	
	form i {
		margin-right: 7px;
		font-size: 17px;
	}
	
	.dis {
		color: darkgray;
		background: #ddd;
	}
</style>